<!DOCTYPE html>
<html>
    <head>
        <title>慕课高铁客户服务中心</title>
        <meta charset='utf-8' />
        <link rel='stylesheet' href='./css/index.css' type='text/css'>
        <script src='./js/index.js' type='text/javascript'></script>
    </head>
    <body>
        <header class="header">
            <div class="header__wrapper">
                <div class="header__logo">
                    <img class="header__logo-pic" src="./img/logo.png" />
                    <div class="header__logo-title">
                        <spn class="header__logo-title-main">慕课高铁客户服务中心</spn> 
                        <span class="header__logo-title-sep"></span>
                        <span class="header__logo-title-sub">客户服务</span>
                    </div>
                </div>
                <div class="header__nav">
                    <ul class="header__list">
                        <li class="header__item">意见反馈</li>
                        <li class="header__item">
                            <span class="header__item_active">imooc@com</span>
                        </li>
                        <li class="header__item">您好，请
                            <span class="header__item_active">登陆</span> | 注册
                        </li>
                        <li class="header__item header__item_select" id="header__item_select">我的IMOOC
                            <span class="header__item_i"></span>
                            <ul class="header__item-list header__item-list_hide">
                                <li class="header__item-i header__item-i_none">未完成订单</li>
                                <li class="header__item-i">已完成订单(改/退)</li>
                                <li class="header__item-i">我的保险</li>
                                <li class="header__item-i">查看个人信息</li>
                                <li class="header__item-i">账户安全</li>
                                <li class="header__item-i">常用联系人</li>
                                <li class="header__item-i header__item-i_none">重点旅客预约</li>
                                <li class="header__item-i">遗失物品查找</li>
                                <li class="header__item-i">服务查询</li>
                                <li class="header__item-i header__item-i_none">投诉</li>
                                <li class="header__item-i">建议</li>
                            </ul>
                        </li>
                        <li class="header__item">
                            <img class="heaser__item_phone" src="./img/phone.png" />
                            手机版
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <div class="main">
            <div class="main__wrapper">
                <div class="main__location">
                    <b>您现在的位置：</b><span>客运首页 > 注册</span>
                </div>
                <div class="main__form">
                    <div class="main__form-head">账户信息</div>
                    <div class="main__form-body">
                        <div class="main__form-item">
                            <span class="main__form-body_require">*</span>
                            <span class="main__form-body_label">用户名：</span>
                            <input type="text" class="main__form-body_input" id="userName" placeholder="用户名设置成功后不可修改" />
                            <span class="main__form-body_tips">6-30位字母、数字或“_"，字母开头</span>
                        </div>
                        <div class="main__form-item">
                            <span class="main__form-body_require">*</span>
                            <span class="main__form-body_label">登陆密码：</span>
                            <input type="password" class="main__form-body_input" id="password" placeholder="6-20位字母、数字或符号" />
                            <span class="main__form-body_strong">
                                <span class="main__form-body_strong-pwd main__form-body_strong-red"></span>
                                <span class="main__form-body_strong-pwd"></span>
                                <span class="main__form-body_strong-pwd"></span>
                            </span>
                        </div>
                        <div class="main__form-item main__form-body_tips-pwd main__form-body_tips-pwd_hide">
                            <span class="main__form-body_tips"></span>
                        </div>
                        <div class="main__form-item">
                            <span class="main__form-body_require">*</span>
                            <span class="main__form-body_label">确认密码：</span>
                            <input type="password" class="main__form-body_input" id="comfirmedPwd" placeholder="再次输入您的登陆密码" />
                            <span class="main__form-body_tips"></span>
                        </div>
                        <div class="main__form-item">
                            <span class="main__form-body_require">*</span>
                            <span class="main__form-body_label">姓名：</span>
                            <input type="text" class="main__form-body_input" id="realName" placeholder="请输入姓名" />
                            <span class="main__form-body_tips"></span>
                            <span class="main__form-body_rules">
                                姓名填写规则
                                <div class="main__form-rules">
                                    <p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p>
                                    <p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。</p>
                                    <p>3.姓名中有繁体字无法输入时，可用简体替代。</p>
                                    <p>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写</p>
                                </div>
                            </span>
                        </div>
                        <div class="main__form-item">
                            <span class="main__form-body_require">*</span>
                            <span class="main__form-body_label">证件类型：</span>
                            <select class="main__form-body_input">
                                <option value="credit">二代身份证</option>
                                <option value="hk">港澳通行证</option>
                                <option value="taiwan">台湾通行证</option>
                                <option value="passport">护照</option>
                            </select>
                        </div>
                        <div class="main__form-item">
                            <span class="main__form-body_require">*</span>
                            <span class="main__form-body_label">证件号码：</span>
                            <input type="text" class="main__form-body_input" id="cId" placeholder="请输入您的证件号码" />
                            <span class="main__form-body_tips"></span>
                        </div>
                        <div class="main__form-item">
                            <span class="main__form-body_require"></span>
                            <span class="main__form-body_label">邮箱：</span>
                            <input type="text" class="main__form-body_input" id="email" placeholder="请正确填写邮箱地址" />
                            <span class="main__form-body_tips"></span>
                        </div>
                        <div class="main__form-item">
                            <span class="main__form-body_require">*</span>
                            <span class="main__form-body_label">手机号码：</span>
                            <input type="number" class="main__form-body_input" id="phone" placeholder="请输入您的手机号码" />
                            <span class="main__form-body_tips">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
                        </div>
                        <div class="main__form-item">
                            <span class="main__form-body_require">*</span>
                            <span class="main__form-body_label">旅客类型：</span>
                            <select class="main__form-body_input">
                                <option value="adult">成人</option>
                                <option value="child">儿童</option>
                                <option value="student">学生</option>
                                <option value="soldier">残疾军人</option>
                                <option value="police">伤残人民警察</option>
                            </select>
                        </div>
                        <div class="main__form-item main__form-checkbox">
                            <input type="checkbox" id="agreen"/> 
                            <span>我已阅读并同意遵守</span>
                            <span class="main__form-item_terms">《中国铁路客户服务中心网站服务条款》</span>
                        </div>
                        <div class="main__form-item main__form-btn">
                            <div class="form__submit-btn" id="submit">下一步</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="footer__wrapper">
                <div class="footer__site">
                    <a href="javascript:void(0);">关于我们</a> | <a href="javascript:void(0);">网站声明</a>
                </div>
                <div class="footer__rights">
                    Copyright &copy; 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2
                </div>
            </div>
        </footer>
    </body>
</html>